<template>
  <div>
    <el-dialog
      v-model="props.visible"
      title=""
      width="80%"
      @close="handleCancel"
    >
      <el-button type="primary" v-print="print">打印</el-button>
      <div id="printBox" v-loading="loading">
        <div class="print-box" v-for="obj in dataList" :key="obj.produceId">
          <div v-if="obj.type == 1">
            <div class="title">
              <h2 class="title-left">
                山东经典印务生产通知单(封面)
                <span
                  v-if="obj.urgentDate"
                  style="margin-left: 50px; font-size: 30px"
                  >加急</span
                >
                <span v-else style="margin-left: 50px">正常</span>
              </h2>
              <div style="width: 300px">
                生产单编号:
                <span style="font-size: 18px">{{
                  obj.produceNo.slice(0, -4)
                }}</span
                ><span style="font-size: 24px">{{
                  obj.produceNo.slice(-4)
                }}</span>
              </div>
            </div>
            <div class="item">
              <div class="item-row">
                开单日期:
                {{ obj.submitDate ? obj.submitDate.split("T")[0] : "" }}
                <span></span>
              </div>
              <div class="item-row">
                交货日期:{{
                  obj.deliverDate ? obj.deliverDate.split("T")[0] : ""
                }}
                <span></span>
              </div>
              <div class="item-row" style="width: 300px">
                出版编号: {{ obj.pubNo }} <span> </span>
              </div>
            </div>
            <div style="font-weight: 700; font-size: large">
              备注:
              <span>{{ obj.remark }}</span>
            </div>
            <h4>产品管理</h4>
            <div>
              <table border="2" cellspacing="0" cellpadding="6">
                <tr>
                  <th class="text" style="width: 300px">书刊名称</th>
                  <!-- <th class="text" style="width: 100px">产品名称</th> -->
                  <th class="text" style="width: 100px">清样编号</th>
                  <th class="text" style="width: 100px">文件号</th>
                  <th class="text" style="width: 100px">书号</th>
                  <th class="text" style="width: 100px">定价</th>
                  <th class="text" style="width: 100px">品种</th>
                  <th class="text" style="width: 100px">印色</th>
                  <th class="text" style="width: 100px">颜色</th>
                  <th class="text" style="width: 100px">订单数量</th>
                  <th class="text" style="width: 100px">覆膜</th>
                  <th class="text" style="width: 100px">喷码</th>
                  <th class="text" style="width: 100px">联版数量</th>
                  <th class="text" style="width: 100px">内文承印厂</th>
                </tr>
                <tr
                  v-for="item in obj.produceProductList"
                  :key="item.productId"
                >
                  <td class="text">
                    {{ item.bookName }}
                  </td>

                  <td class="text">
                    {{ item.sampleNo }}
                  </td>
                  <td class="text">
                    {{ item.fileNo }}
                  </td>
                  <td class="text">
                    {{ item.bookNo }}
                  </td>
                  <td class="text">
                    {{ item.fixPrice }}
                  </td>
                  <td class="text">
                    {{ item.breedType }}
                    <!-- <dict-tag
                                        :options="ems_order_make_up"
                                        :value="item.composition"
                                    /> -->
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="ems_order_print_color"
                      :value="item.printColor"
                    />
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="ems_produce_color"
                      :value="item.color"
                    />
                  </td>
                  <td class="text">
                    {{ item.produceCount }}
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="ems_produce_cover_film"
                      :value="item.coverFilm"
                    />
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="ems_produce_marking"
                      :value="item.marking"
                    />
                  </td>
                  <td class="text">
                    {{ item.lianbanCount }}
                  </td>
                  <td class="text">
                    {{ item.textPrinter }}
                  </td>
                </tr>
              </table>
            </div>
            <h4>纸张管理</h4>
            <div>
              <table border="2" cellspacing="0" cellpadding="6">
                <tr>
                  <th class="text" style="width: 150px">纸张类型</th>
                  <th class="text" style="width: 200px">纸型</th>
                  <!-- <th class="text" style="width: 100px;">品种</th> -->
                  <th class="text" style="width: 150px">定量</th>
                  <th class="text" style="width: 150px">规格</th>
                  <th class="text" style="width: 150px">幅度(mm)</th>
                  <!-- <th class="text" style="width: 100px">宽度(mm)</th> -->
                  <th class="text" style="width: 150px">单位</th>
                  <th class="text" style="width: 150px">库存数量</th>
                  <th class="text" style="width: 150px">用纸令数</th>
                  <th class="text" style="width: 150px">裁切尺寸</th>
                </tr>
                <tr v-for="item in obj.producePaperList" :key="item.paperId">
                  <td class="text">
                    <dict-tag
                      :options="mes_paper_material"
                      :value="item.type"
                    />
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="mes_paper_type"
                      :value="item.paperType"
                    />
                  </td>
                  <td class="text">
                    {{ item.weight }}
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="mes_paper_specs"
                      :value="item.specifications"
                    />
                  </td>
                  <td class="text">
                    {{ item.length == 0 ? "" : item.length }}
                  </td>
                  <!-- <td class="text">
                                {{ item.width }}
                            </td> -->
                  <td class="text">
                    <dict-tag :options="mes_paper_unit" :value="item.unit" />
                  </td>
                  <td class="text">
                    {{ item.amount }}
                  </td>
                  <td class="text">
                    {{ item.reamAmount }}
                  </td>
                  <td class="text">
                    {{ item.size }}
                  </td>
                </tr>
              </table>
            </div>
            <h4>印刷管理</h4>
            <div>
              <table border="2" cellspacing="0" cellpadding="6">
                <tr>
                  <th class="text" style="width: 100px">部件</th>
                  <th class="text" style="width: 100px">纸型</th>
                  <th class="text" style="width: 80px">定量</th>
                  <th class="text" style="width: 80px">印数</th>
                  <th class="text" style="width: 80px">用纸令数</th>
                  <th class="text" style="width: 80px">损耗比例</th>
                  <th class="text" style="width: 80px">损耗令数</th>
                  <th class="text" style="width: 100px">用纸总令数</th>
                  <th class="text" style="width: 80px">另行加放</th>
                  <th class="text" style="width: 80px">印色</th>
                  <th class="text" style="width: 100px">印色方式</th>
                  <th class="text" style="width: 100px">版材数量</th>
                  <th class="text" style="width: 100px">版材尺寸</th>
                  <th class="text" style="width: 100px">活页烤版</th>
                  <th class="text" style="min-width: 150px">纸张规格</th>
                  <th class="text" style="min-width: 100px">装订机台</th>
                </tr>
                <tr v-for="item in obj.producePrintList" :key="item.printId">
                  <td class="text">
                    {{ item.composition }}
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="mes_paper_type"
                      :value="item.paperType"
                    />
                  </td>
                  <td class="text">
                    {{ item.weight }}
                  </td>
                  <td class="text">
                    {{ item.printAmount }}
                  </td>
                  <td class="text">
                    {{ item.reamAmount }}
                  </td>

                  <td class="text">
                    {{ item.lossCoefficient }}
                  </td>
                  <td class="text">
                    {{ item.lossReam }}
                  </td>
                  <td class="text">
                    {{ item.totalReamAmount }}
                  </td>
                  <td class="text">
                    {{ item.lxjf }}
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="ems_order_print_color"
                      :value="item.printColour"
                    />
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="ems_produce_print_colour_type"
                      :value="item.printColourType"
                    />
                  </td>
                  <td class="text">
                    {{ item.sheetAmount }}
                  </td>

                  <td class="text">
                    <dict-tag
                      :options="ems_machine_info_size"
                      :value="item.sheetSize"
                    />
                  </td>
                  <td class="text">
                    <dict-tag :options="ems_produce_hykb" :value="item.hykb" />
                  </td>
                  <td class="text">
                    <span font-size="5px;">{{ item.paperName }}</span>
                    <!-- <dict-tag
                                        :options="mes_paper_specs"
                                        :value="item.paperSpecifications"
                                    /> -->
                  </td>
                  <td class="text">
                    {{ item.bindingMachine?.split("/")[1] }}
                  </td>
                </tr>
              </table>
            </div>
            <h4>覆膜管理</h4>
            <div>
              <table border="2" cellspacing="0" cellpadding="6">
                <tr>
                  <th class="text" style="width: 240px">部件</th>
                  <th class="text" style="width: 240px">覆膜</th>
                  <th class="text" style="width: 240px">定量</th>
                  <th class="text" style="width: 240px">纸型</th>
                  <th class="text" style="width: 240px">规格型号</th>
                  <th class="text" style="width: 240px">令数</th>
                </tr>
                <tr
                  v-for="item in obj.produceCoveringList"
                  :key="item.coveringId"
                >
                  <td class="text">
                    <!-- <dict-tag :options="ems_order_make_up" :value="item.composition" /> -->
                    {{ item.composition }}
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="ems_produce_cover_film"
                      :value="item.covering"
                    />
                  </td>
                  <td class="text">
                    {{ item.weight }}
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="mes_paper_type"
                      :value="item.paperType"
                    />
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="mes_paper_specs"
                      :value="item.specification"
                    />
                  </td>
                  <td class="text">
                    {{ item.ream }}
                  </td>
                </tr>
              </table>
            </div>

            <div class="item" style="margin-top: 20px">
              <div></div>
              <div></div>
              <div></div>
              <div class="item-row">
                制单人:
                {{ obj.createBy }}
                <span></span>
              </div>
              <div class="item-row">
                制单日期:{{
                  obj.createTime ? obj.createTime.split("T")[0] : ""
                }}
                <span></span>
              </div>
            </div>
          </div>
          <div v-else>
            <div class="title">
              <h2 class="title-left">
                山东经典印务生产通知单(内文) 「{{ obj.workshopName }}」
                <span
                  v-if="obj.urgentDate"
                  style="margin-left: 50px; font-size: 30px"
                  >加急</span
                >
                <span v-else style="margin-left: 50px">正常</span>
              </h2>
              <div style="width: 300px">
                生产单编号:
                <span style="font-size: 18px">{{
                  obj.produceNo.slice(0, -4)
                }}</span
                ><span style="font-size: 24px">{{
                  obj.produceNo.slice(-4)
                }}</span>
              </div>
            </div>

            <el-row>
              <el-col :span="5">
                下单日期:
                {{ obj.submitDate ? obj.submitDate.split("T")[0] : "" }}</el-col
              >
              <el-col :span="5"
                >交货日期:
                {{
                  obj.deliverDate ? obj.deliverDate.split("T")[0] : ""
                }}</el-col
              >
              <el-col :span="5"
                >文件日期:
                {{ obj.fileDate ? obj.fileDate.split("T")[0] : "" }}</el-col
              >
              <el-col :span="5">印刷次数: {{ obj.printNum }}</el-col>
              <el-col :span="4">定价: {{ obj.fixPrice }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="20">产品名称: {{ obj.shipmentType }}</el-col>
              <el-col :span="4">出版编号: {{ obj.pubNo }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="5">出版社: {{ obj.publishingHouse }}</el-col>
              <el-col :span="5">书号: {{ obj.bookNo }}</el-col>
              <el-col :span="5">印次: {{ obj.printNo }}</el-col>
              <el-col :span="5"
                >新/旧版:
                <dict-tag
                  style="display: inline-block"
                  :options="ems_produce_is_new"
                  :value="obj.isNew"
              /></el-col>
              <el-col :span="4">订单数量: {{ obj.orderCount }}</el-col>
            </el-row>
            <el-row v-if="obj.mergePrintCode">
              <el-col>
                <div style="font-weight: 700; font-size: large">
                  合印生产单:
                  <span>{{ obj.mergePrintCode }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <div style="font-weight: 700; font-size: large">
                  备注:
                  <span>{{ obj.remark }}</span>
                </div>
              </el-col>
            </el-row>
            <h4>产品管理</h4>
            <div>
              <table border="2" cellspacing="0" cellpadding="6">
                <tr>
                  <th class="text" style="width: 100px">关联封面</th>
                  <th class="text" style="width: 100px">系统外封面</th>
                  <th class="text" style="width: 100px">品种</th>
                  <th class="text" style="width: 100px">装订方式</th>
                  <th class="text" style="width: 100px">开本数</th>
                  <th class="text" style="width: 100px">组成</th>
                  <th class="text" style="min-width: 220px">详细信息</th>
                  <th class="text" style="width: 100px">印色</th>
                  <th class="text" style="width: 100px">颜色</th>
                  <th class="text" style="width: 100px">用纸尺寸</th>
                  <th class="text" style="width: 100px">成品尺寸</th>
                  <th class="text" style="width: 100px">烤版</th>
                  <th class="text" style="width: 100px">版材尺寸</th>
                  <th class="text" style="width: 100px">贴数信息</th>
                  <th class="text" style="width: 100px">出版编号</th>
                </tr>
                <tr
                  v-for="item in obj.produceProductList"
                  :key="item.productId"
                >
                  <td class="text">
                    <div v-for="ite in item.produceNos?.split(',')" :key="ite">
                      {{ ite }}
                    </div>
                  </td>
                  <td class="text">
                    {{ item.systemOutFm }}
                  </td>
                  <td class="text">
                    {{ item.breedType }}
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="ems_order_binding_mode"
                      :value="item.bindingMode"
                    />
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="ems_produce_book_size"
                      :value="item.bookSize"
                    />
                  </td>
                  <td class="text">
                    {{ item.composition }}
                  </td>
                  <td class="text">
                    {{ item.detail }}
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="ems_order_print_color"
                      :value="item.printColor"
                    />
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="ems_produce_color"
                      :value="item.color"
                    />
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="ems_produce_paper_size"
                      :value="item.paperSize"
                    />
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="ems_produce_finish_size"
                      :value="item.finishSize"
                    />
                  </td>
                  <td class="text">
                    {{ item.kaoban == 1 ? "是" : "否" }}
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="ems_machine_info_size"
                      :value="item.sheetSize"
                    />
                  </td>
                  <td class="text">
                    {{ item.piece }}
                  </td>
                  <td class="text">
                    {{ item.pubNo }}
                  </td>
                </tr>
              </table>
            </div>
            <div style="display: flex; align-items: center; margin: 20px 0">
              <h4 style="width: 100px">纸张管理</h4>
              <table
                style="margin-left: 50px"
                border="2"
                cellspacing="0"
                cellpadding="6"
              >
                <tr>
                  <td class="text" rowspan="2" style="width: 60px">
                    不配套图书
                  </td>
                  <td class="text" style="width: 300px">单号</td>
                  <td class="text" style="width: 100px">品种</td>
                  <td
                    class="text"
                    v-for="(item, index) in obj.listBPT"
                    :key="index"
                    width="160"
                  >
                    {{ item.name }}
                  </td>
                </tr>
                <tr>
                  <td class="text">
                    {{ obj.bookCode }}
                  </td>
                  <td class="text" style="width: 100px">数量</td>
                  <td
                    class="text"
                    v-for="(item, index) in obj.listBPT"
                    :key="index"
                  >
                    {{ item.val }}
                  </td>
                </tr>
              </table>
            </div>
            <div>
              <table border="2" cellspacing="0" cellpadding="6">
                <tr>
                  <th class="text" style="width: 150px">纸张类型</th>
                  <th class="text" style="width: 220px">纸型</th>
                  <th class="text" style="width: 150px">品牌</th>
                  <th class="text" style="width: 150px">定量</th>
                  <th class="text" style="width: 150px">规格</th>
                  <th class="text" style="width: 150px">幅宽(mm)</th>
                  <!-- <th class="text" style="width: 100px">宽度(mm)</th> -->
                  <th class="text" style="width: 100px">单位</th>
                  <th class="text" style="width: 100px">库存数量</th>
                  <th class="text" style="width: 100px">数量</th>
                  <th class="text" style="width: 150px">裁切尺寸</th>
                </tr>
                <tr v-for="item in obj.producePaperList" :key="item.paperId">
                  <td class="text">
                    <dict-tag
                      :options="mes_paper_material"
                      :value="item.type"
                    />
                  </td>
                  <td class="text">
                    {{ item.paperName }}
                    <!-- <dict-tag :options="mes_paper_type" :value="item.paperType" /> -->
                  </td>
                  <td class="text">
                    <dict-tag :options="mes_paper_brand" :value="item.brand" />
                  </td>
                  <td class="text">
                    {{ item.weight }}
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="mes_paper_specs"
                      :value="item.specifications"
                    />
                  </td>
                  <td class="text">
                    {{ item.length == 0 ? "" : item.length }}
                  </td>
                  <!-- <td class="text">
                                {{ item.width }}
                            </td> -->
                  <td class="text">
                    <dict-tag :options="mes_paper_unit" :value="item.unit" />
                  </td>
                  <td class="text">
                    {{ item.amount }}
                  </td>
                  <td class="text">
                    {{ item.reamAmount }}
                  </td>
                  <td class="text">
                    {{ item.size }}
                  </td>
                </tr>
              </table>
            </div>
            <h4>印刷管理</h4>
            <div>
              <table border="2" cellspacing="0" cellpadding="6">
                <tr>
                  <th class="text" style="width: 100px">品种</th>
                  <th class="text" style="width: 100px">组成</th>
                  <th class="text" style="width: 100px">印张</th>
                  <th class="text" style="width: 80px">贴标</th>
                  <th class="text" style="width: 100px">印数</th>
                  <th class="text" style="width: 100px">用纸令数</th>
                  <th class="text" style="width: 100px">损耗比例</th>
                  <th class="text" style="width: 100px">损耗令数</th>
                  <th class="text" style="width: 100px">用纸总令数</th>
                  <th class="text" style="width: 100px">吨位系数</th>
                  <th class="text" style="width: 100px">轮转吨数</th>
                  <th class="text" style="width: 100px">另行加放</th>
                  <th class="text" style="width: 100px">成品尺寸</th>
                  <th class="text" style="min-width: 150px">纸张规格</th>
                  <th class="text" style="min-width: 120px">装订机台</th>
                </tr>
                <tr v-for="item in obj.producePrintList" :key="item.printId">
                  <td class="text">
                    {{ item.breed }}
                  </td>
                  <td class="text">
                    {{ item.composition }}
                  </td>
                  <td class="text">
                    {{ item.sheet }}
                  </td>
                  <td class="text">
                    {{ item.labeling }}
                  </td>
                  <td class="text">
                    {{ item.printAmount }}
                  </td>
                  <td class="text">
                    {{ item.reamAmount }}
                  </td>

                  <td class="text">
                    {{ item.lossCoefficient }}
                  </td>
                  <td class="text">
                    {{ item.lossReam }}
                  </td>
                  <td class="text">
                    {{ item.totalReamAmount }}
                  </td>
                  <td class="text">
                    {{ item.tonnageCoefficient }}
                  </td>
                  <td class="text">
                    {{ item.rotateTon == 0 ? "" : item.rotateTon }}
                  </td>
                  <td class="text">
                    {{ item.lxjf }}
                  </td>
                  <td class="text">
                    <dict-tag
                      :options="ems_produce_finish_size"
                      :value="item.finishSize"
                    />
                  </td>

                  <td class="text">
                    {{ item.paperName }}
                    <!-- <dict-tag
                                        :options="mes_paper_specs"
                                        :value="item.paperSpecifications"
                                    /> -->
                  </td>
                  <td class="text">
                    {{ item.bindingMachine?.split("/")[1] }}
                  </td>
                </tr>
              </table>
            </div>
            <el-row style="margin-top: 20px">
              <el-col :span="24"
                >印刷备注:
                {{ obj.remark3 }}
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8"
                >打包方式:
                <dict-tag
                  style="display: inline-block"
                  :options="ems_order_pack_way"
                  :value="obj.packWay"
              /></el-col>
              <el-col :span="8">包内数量: {{ obj.packInNum }}</el-col>
              <el-col :span="8">打包要求: {{ obj.packageRequire }}</el-col>
            </el-row>
            <!-- <el-row>
              <el-col :span="24">备注: {{ obj.remark }}</el-col>
            </el-row> -->
            <div class="item" style="margin-top: 10px">
              <div class="item-row">
                <span class="el-title"></span>
                <span class="title-val"></span>
              </div>
              <div class="item-row">
                <span class="el-title"></span>
                <span class="title-val"></span>
              </div>
              <div class="item-row">
                <span class="el-title">制单人：</span>
                <span class="title-val">{{ obj.createBy }}</span>
              </div>
              <div class="item-row">
                <span class="el-title">制单日期：</span>
                <span class="title-val">{{ parseTime(obj.createTime) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
import { parseTime } from "@/utils/ruoyi.js";
const emit = defineEmits(["cancel"]);
import { getProduceById } from "@/api/production/cover";
const {
  ems_produce_package_require,
  ems_machine_info_waste_rate,
  ems_produce_new_past,
  ems_order_binding_mode,
  ems_produce_finish_size,
  ems_produce_is_new,
  ems_produce_book_size,
  mes_paper_brand,
  mes_paper_package,
  ems_machine_info_size,
  mes_paper_material,
  mes_paper_specs,
  mes_paper_unit,
  ems_produce_color,
  mes_paper_type,
  ems_order_make_up,
  ems_order_breed_type,
  ems_order_print_color,
  ems_produce_paper_size,
  ems_order_pack_way,
  ems_workshop,
  ems_produce_hykb,
  ems_produce_print_colour_type,
  ems_produce_cover_film,
  ems_produce_marking,
} = proxy.useDict(
  "ems_produce_package_require",
  "ems_machine_info_waste_rate",
  "ems_produce_new_past",
  "ems_produce_is_new",
  "ems_produce_finish_size",
  "mes_paper_package",
  "mes_paper_brand",
  "ems_produce_book_size",
  "ems_order_binding_mode",
  "mes_paper_unit",
  "mes_paper_specs",
  "mes_paper_material",
  "ems_machine_info_size",
  "ems_produce_color",
  "ems_produce_paper_size",
  "mes_paper_type",
  "ems_order_print_color",
  "ems_order_make_up",
  "ems_order_breed_type",
  "ems_order_pack_way",
  "ems_workshop",

  "ems_produce_hykb",
  "ems_produce_print_colour_type",
  "ems_produce_cover_film",
  "ems_produce_marking"
);
const route = useRoute();
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  id: {
    type: [String, Number],
    default: "",
  },
  printList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
const bookCode = ref("");
const listBPT = ref([]);
const loading = ref(true);
const dataList = ref([]);
const data = reactive({
  produceProductList: [], // 产品
  producePaperList: [], // 纸张
  producePrintList: [], // 印刷
  produceCoveringList: [], // 覆膜
  producePieceList: [],
  form: {},
});

const {
  form,
  produceProductList,
  producePaperList,
  producePrintList,
  produceCoveringList,
  producePieceList,
} = toRefs(data);

watch(
  () => props.printList,
  async (val) => {
    if (val.length > 0) {
      try {
        loading.value = true;
        const promises = val.map((item) =>
          getProduceById({ pid: item.produceId })
        );
        const responses = await Promise.all(promises);
        loading.value = false;
        dataList.value = [];
        responses.forEach((response) => {
          response.data.listBPT = JSON.parse(
            response.data?.irregularBooks
          )?.listBPT;
          response.data.bookCode = JSON.parse(
            response.data?.irregularBooks
          )?.bookCode;
          dataList.value.push(response.data);
        });
      } catch (error) {
        loading.value = false;
        // 处理可能出现的错误
        console.error("Error fetching produce:", error);
      }
    }
  },
  {
    deep: true,
  }
);
//这里是打印的配置项
const print = ref({
  id: "printBox", //这里的id就是上面我们的打印区域id，实现指哪打哪
  popTitle: "配置页眉标题", // 打印配置页上方的标题
  fitToPage: true,
  // extarCss: `@page { size: auto;  margin: 20mm; } @media print { body { zoom: 0.6; } }`,
  style: `@page { size: auto;  margin: 20mm; zoom: 66%; }`, // 设置缩放比例为100%
  extraHead: "", // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewTitle: "山东经典印务生产通知单(内文)", // 打印预览的标题
  previewPrintBtnLabel: "预览结束，开始打印", // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() {
    console.log("正在加载预览窗口！");
  }, // 预览窗口打开之前的callback
  previewOpenCallback() {
    console.log("已经加载完预览窗口，预览打开了！");
  }, // 预览窗口打开时的callback
  beforeOpenCallback() {
    emit("cancel");
    console.log("开始打印之前！");
  }, // 开始打印之前的callback
  openCallback() {
    console.log("执行打印了！");
  }, // 调用打印时的callback
  closeCallback() {
    console.log("关闭了打印工具！");
  }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() {
    console.log("点击v-print绑定的按钮了！");
  },
});
const handleCancel = () => {
  dataList.value = [];
  emit("cancel");
};
</script>

<style lang="scss" scoped>
.printBox {
  font-size: 9px !important;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title-left {
    text-align: center;
    flex: 1;
  }
}

.item {
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

table,
th,
td {
  border: 1px solid #ccc;
}

th,
td {
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}
@media print {
  table {
    width: 100% !important;
    max-width: 100% !important;
  }
}

.el-title {
  width: 120px;
  text-align: right;
}
.title-val {
  width: 200px;
}
.print-box {
  page-break-before: always;
}
</style>
